<template>
    <div class="flex">
        <div class="chart">
            <V3Echarts :height="props.height * 0.8" :options="option" :top="10" container="container3" isFirst />
        </div>

        <div class="legend">
            <div v-for="(item, index) in props.chartData" :key="item.name">
                <div class="item" v-if="item.name">
                    <div class="item-left">
                        <div class="circle" :style="'background:' + props.color[index]"></div>
                        <div class="label">{{ item.name }}</div>
                    </div>
                    <div class="count">
                        {{ item.value }}
                        <span class="unit">{{ props.unit }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { watch } from 'vue'
import V3Echarts from '@/stories/components/V3Echarts/index.vue'

interface chartDataType {
    name: string
    value: number
}

const props = defineProps({
    chartData: {
        type: Array<chartDataType>,
        default: () => {
            return [
                {
                    name: '湛江',
                    value: 60
                },
                {
                    name: '地市',
                    value: 35
                },
                {
                    name: '外省',
                    value: 5
                }
            ]
        }
    },
    color: {
        type: Array,
        default: () => ['#00fffc', '#64baff', '#fe8151', '#a183e2', '#b4b3ca', '#f14313', '#d6a33d']
    },
    unit: {
        type: String,
        default: ''
    },
    height: {
        type: Number,
        default: 380
    }
})
let option = {},
    color88: string[] = []

const initChart = () => {
    const colorCopy = JSON.parse(JSON.stringify(props.color))
    colorCopy.forEach((item: string) => {
        color88.push(item + '88')
    })
    const chartDataCopy = JSON.parse(JSON.stringify(props.chartData))

    chartDataCopy.forEach((item: any, index: number) => {
        item.emphasis = {
            itemStyle: {
                color: colorCopy[index]
            }
        }
    })

    option = {
        color: color88,
        series: [
            {
                type: 'pie',
                radius: ['65%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                emphasis: {
                    focus: 'series',
                    scale: false,

                    label: {
                        show: true,
                        fontWeight: 'bold',
                        formatter: ['{a|{d}}{b| %}', '{b|{b}}'].join('\n'),
                        rich: {
                            a: {
                                color: '#ffffff',
                                fontSize: 32,
                                lineHeight: 50,
                                fontFamily: 'Tencent'
                            },
                            b: {
                                color: '#dddddd',
                                fontSize: 30
                            }
                        }
                    }
                },
                data: chartDataCopy
            },
            {
                type: 'pie',
                radius: ['58%', '63%'],
                center: ['50%', '50%'],
                hoverAnimation: false,
                label: {
                    show: false
                },
                emphasis: {
                    disabled: true
                },
                data: chartDataCopy
            }
        ]
    }
}

watch(
    () => props,
    newValue => {
        initChart()
    },
    { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped>
.flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: v-bind('props.height');
}

.chart {
    width: 45%;
}

.legend {
    width: 54%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 100%;
    .item {
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(0, 0, 0, 0.25);
        .item-left {
            display: flex;
            align-items: center;
        }
        .circle {
            width: 20px;
            height: 20px;
            margin-right: 10px;
            margin-left: 10px;
            border-radius: 50%;
        }
        .label {
            font-size: 26px;
            color: #ddd;
            margin-right: 10px;
        }
        .count {
            font-size: 30px;
            font-family: Tencent;
            color: #86dbff;
            text-align: right;
            .unit {
                font-size: 24px;
            }
        }
    }
}
</style>
